<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-row type="flex" justify="end" style="margin-bottom: 20px">
      <el-col :span="3" style="margin-right: 10px;">
        <el-input v-model.trim="params.name" placeholder="请输入姓名" clearable @clear="getAccess"></el-input>
      </el-col>
      <el-col :span="3" style="margin-right: 10px;">
        <el-input v-model.trim="params.stuId" placeholder="请输入学号" clearable @clear="getAccess"></el-input>
      </el-col>
      <!-- 搜索重置按钮 -->
      <el-button type="primary" @click="getAccess" icon="el-icon-search"></el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-row>
    <!-- 表格展示 -->
    <el-table :data="tableData" v-loading="loading" stripe border>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="stuId" label="学号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="room" label="宿舍号"></el-table-column>
      <el-table-column prop="swipingLocation" label="刷卡地点"></el-table-column>
      <el-table-column prop="device" label="装置"></el-table-column>
      <el-table-column prop="swipingTime" label="刷卡时间">
        <template v-slot="scope">
          {{
            scope.row.swipingTime | dateFormat
          }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getAccess } from "@/api/access";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      params:{
        name:"",
        stuId:""
      },
      // 总条数
      total: 1,
      // 加载框默认值
      loading: false,
    };
  },
computed: {
        ...mapGetters(["username"]),
    },
  created() {
    this.getAccess();
  },
  methods: {
    // 获取门禁数据
    async getAccess() {
      await getAccess({username:this.username,name:this.params.name,stuId:this.params.stuId}).then((res) => {
        if (res.code === "200") {
          console.log(res);
          // 加载框打开
          this.loading = true;
          // 添加定时器
          setTimeout(() => {
            this.tableData = res.data.records;
            this.loading = false;
          }, 200);
        } else {
          this.$message.error("请求错误");
        }
      }).catch((err)=>{
        console.log(err);
      });
    },
    // 重置按钮
    async reset() {
      this.params.stuId = "";
      this.params.name = "";
      await getAccess({username:this.username,name:this.params.name,stuId:this.params.stuId}).then((res) => {
        this.loading = true;
        setTimeout(() => {
          this.tableData = res.data.records;
          this.loading = false;
        }, 500);
      });
    },
  },
};
</script>
<style lang="">
</style>